前言

今日針對 AJAX 的 post 進行說明

發送資料至遠端

• 資料發送流程：

  • var xhr = new XMLHttpRequest();
  • xhr.open('post','test.json',true);
  • xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
  • xhr.send('資料');

• new XMLHttpRequest()：用來建立 AJAX 請求

• xhr.open('格式','網址',BooLean)：這次格式使用 post

• xhr.setRequestHeader(header, value);：設定內容的類型

  • header：屬性的名稱
  • value：屬性的值
  • 發送表單類型的資料：('Content-Type','application/x-www-form-urlencoded')
  • 發送 JSON 類型的資料：('Content-Type','application/json')

• xhr.send('資訊')：填入要傳送的值

  • 如果為表單類型，可能是 name=abcd&password=1234 ，2組屬性以 & 連接
  • 如果為 JSON 類型，要先將資料轉成文字再傳送，如 JSON.stringify(data)

• 參考：

  • 使用 POST 請求
  • XMLHttpRequest — JavaScript 發送 HTTP 請求 (I)
  • XMLHttpRequest.setRequestHeader()

實作

• 利用六角的 API 進行 post 練習：https://github.com/hexschool/nodejs_ajax_tutorial
• 完成後可以使用 chrome 右鍵檢查內的 Network 確認
  • 如果找不到，可能是時間軸沒包含到或是顯示沒選擇 All

表單類型

var xhr = new XMLHttpRequest();

xhr.open('post','https://hexschool-tutorial.herokuapp.com/api/signup',true);

xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
// 格式為 表單
xhr.send('email=abc@gmail.com&password=1234');
// 傳送資料

// 開啟 console 輸入 xhr 或 xhr.response 確認訊息

// 第一次執行(新增)會出現
// response: "{"success":true,"result":{},"message":"帳號註冊成功"}"

// 第二次執行(重複)會出現
// response: "{"success":false,"result":{},"message":"此帳號已被使用"}"

JSON 類型

var account = {
	email: 'abcd@gmail.com',
	password:'1234'
}
// JSON 的資料
var xhr = new XMLHttpRequest();

xhr.open('post','https://hexschool-tutorial.herokuapp.com/api/signup',true);

xhr.setRequestHeader('Content-type','application/json');
// 格式為 JSON
var data = JSON.stringify(account);
// 將 JSON 轉為 文字
xhr.send(data);
// 傳送文字資料

使用 Network 確認

次回

最後一天了！做個總結